This appendix details each of the CSS properties that Layout Master allows you to edit for either positioned elements or the body of the page. It also shows how well these properties are supported in the various browsers.
The properties we are interested in belong to three groups.
background-color, not surprisingly, specifies the color of the background of an element. Any element can be given a background color with CSS.
background-color is specified as either a color value, or as transparent.
For more on color values, see our section on values.
A background-color of transparent ensures that whatever is behind an element is visible, rather than obscured by the background of the element. This is particularly useful with positioned elements, which might overlap two or more elements.
If no background-color is specified, then the element has a transparent background.
background-color is not inherited by an element from its parent. However, not specifying a background-color, or setting it to transparent ensures that the color of the element or elements behind shines through.
As mentioned in the Browser support notes below, Netscape 4.x had an irritating bug which meant that the background color did not completely fill the entire box of the element, only it's content. So for example, if you set a background-color for headings, only the individual words in the heading would be backed by color, leaving unsightly gaps in between. There is a simple workaround for this though which needn't affect how the element will appear in any other browser. Give the selector for this element both a width and a border. You can use a width of auto if you don't want it to be any wider than its content. Likewise you can give a border-style of none, if you don't want the element to actually have a border. The problem in Netscape 4 should be cleared up by doing this.
| Internet Explorer | Netscape Navigator | Opera | WebTV | ||||||||
| Windows | Macintosh | (All Platforms) | (All Platforms) | ||||||||
| 4.0 | 5.0 | 5.5 | 6.0 | 4.0 | 4.5 | 5.0 | 4.x | 6.0 | 3.5 | 5.0 | 1.0 |
| Y | Y | Y | Y | Y | Y | Y | B | Y | Y | Y | Y |
| Netscape Navigator 4.x has one major and one smaller problem. The major problem is that background colors on block elements only occupy the content of the element, not the entire box. See above under Hints and Suggestions for a method of dealing with this. The smaller problem concerns use of the color keyword transparent. When you use this keyword on an element, the color of the body, rather than that of the parent element will shine through.Note also minor problems with color units. |
|||||||||||
With traditional HTML based web pages, only an entire page can have a background image. Some browsers allow some elements, for example table cells, to have background images, but this is non standard.
CSS lets any element have a background image. As we will shortly see, the background image can be used in more ways than the simple tiled backgrounds of traditional web pages.
background images are specified as either a URL of the image to be used for the background, or by the keyword none.
For more detail on URLs see the section in the discussion on values.
If no background-image is specified, an element has a background-image of none.
background-image is not inherited from the parent element.
The URL for the background-image is relative to the style sheet, not to the HTML document. While this ought to be clear when you think about it, Navigator 4 does not work correctly, treating the URL relative to the HTML document. This is fine if the style sheet is embedded, but doing this defeats several of the major purposes of style sheets.
There's a simple solution though if you do choose to use a linked style sheet: in the style sheet specify the location of the background image using an absolute URL.
It is also recommended that you specify a background-color as well as a background-image. This ensures that if the image is unavailable (or images are off by the user), the foreground text color does not blend with the background, so text remains legible.
| Internet Explorer | Netscape Navigator | Opera | WebTV | ||||||||
| Windows | Macintosh | (All Platforms) | (All Platforms) | ||||||||
| 4.0 | 5.0 | 5.5 | 6.0 | 4.0 | 4.5 | 5.0 | 4.x | 6.0 | 3.5 | 5.0 | 1.0 |
| Y | Y | Y | Y | Y | Y | Y | B | Y | Y | Y | Y |
| Netscape Navigator 4.x incorrectly resolves urls. Relative urls are treated as relative to the HTML file, not the style sheet file. See Hints and suggestions above for a workaround for this. |
|||||||||||
With traditional background images in the body of HTML documents, when the page is scrolled, the image scrolls too. With background images and CSS, you can specify that the background image should not scroll, but rather remain fixed as the page scrolls.
background-attachment can take one of two values, scroll and fixed.
scroll specifies that the background should scroll as the page scrolls (this is the current behavior of browsers when a page with a background image scrolls)
fixed specifies that the background image should not move as the page scrolls. Effectively the foreground text, images and other content scroll over a stationary background.
If no background-attachment value is specified, the default value is scroll, which reproduces the behavior of major browsers.
background-attachment is not inherited.
In practice, only body elements are affected by the background-attachment property. If and when the overflow property is well supported by major browsers, the background-attachment property of those elements will become important.
| Internet Explorer | Netscape Navigator | Opera | WebTV | ||||||||
| Windows | Macintosh | (All Platforms) | (All Platforms) | ||||||||
| 4.0 | 5.0 | 5.5 | 6.0 | 4.0 | 4.5 | 5.0 | 4.x | 6.0 | 3.5 | 5.0 | 1.0 |
| Y | Y | Y | Y | Y | Y | Y | N | Y | Y | Y | N |
| Using background-attachment on elements other than the body only really works at all in Internet Explorer 5 Macintosh, and can cause strange redrawing problems in any browser. Not recommended on elements other than the body. | |||||||||||
With the traditional background image associated with the body of a page, where the background image is smaller than the width and or height of the page, browsers "tile" the image (that is repeat the image horizontally and vertically).
CSS allows you to specify whether and how a browser treats background images when the width and height of the image is less than that of the element.
background-repeat can take the following values
repeat
repeat-x
repeat-y
no-repeat
repeat has the effect of tiling the background image horizontally and vertically like the traditional background image in web pages.
repeat-x tiles an image horizontally, but not vertically.
repeat-y tiles the image vertically but not horizontally.
no-repeat ensures that the image appears once and does not tile either horizontally or vertically.
If no background-repeat value is set, the default value of this property is repeat. This reproduces the effect of the traditional background image.
background-repeat is not inherited from the parent element.
Elements other than the body can be given a background image, and so may also have a background-repeat.
| Internet Explorer | Netscape Navigator | Opera | WebTV | ||||||||
| Windows | Macintosh | (All Platforms) | (All Platforms) | ||||||||
| 4.0 | 5.0 | 5.5 | 6.0 | 4.0 | 4.5 | 5.0 | 4.x | 6.0 | 3.5 | 5.0 | 1.0 |
| B | Y | Y | Y | B | Y | Y | B | Y | Y | Y | N |
| Netscape Navigator 4.0x and 4.5 Macintosh supports background-repeat, where the image is simply made to repeat to fill the element from the top left corner, or repeat down or across from there. Note that because background-position is not supported background images repeated or tiled will always commence in the top left hand corner of the element. Netscape Navigator 4.0x and 4.5 Windows has buggy support for background-repeat. A terrible redrawing problem becomes apparent if the image is not made to repeat in such a way that it covers the whole element (ie, if you use repeat-x, repeat-y or no-repeat). These values should be avoided. Note that because background-position is not supported, background images repeated or tiled will always commence in the top-left hand corner of the element.Internet Explorer 4.0x Macintosh and Windows gives the impression that it repeats correctly in both directions when the background image is placed at the top left of the element. When the background image is positioned elsewhere, it is incorrectly repeated, only down, and or to the right from its starting position, not in every direction as it should be. |
|||||||||||
With a traditional HTML based background image, the image is placed in the top left hand corner of the page, and tiles from there.
With CSS, we can specify where a background image is placed.
If the image repeats (horizontally, vertically or both) then it repeats from this location. If there is a single image, it is placed using the background-position property.
background-position is among the more complicated properties. There are several ways of specifying an image position. Positions may be specified using
Pairs of Percentage Values
When a position is specified using a pair of percentage values (for example, background-position: 0% 0%) the first value relates to the position of the top of the image, while the second relates to the position of the left of the image. The actual mechanism is best explained with examples.
Suppose we have the following property: (background-position: 15% 25%). This means that the point 15% from the top of the image is aligned with the point 15% from the top of the element. The point 25% from the left of the image is aligned with the point 25% from the left of the element.
This is a little tricky. There are more straightforward ways of specifying the position.
Pairs of Length Values
When a position is specified using a pair of length values, (for example background-position 20px 20px) the first value specifies the position of the top of the image relative to the element, while the second value specifies the position of the left of the image relative to the element.
The way in which this works is somewhat simpler than percentages. Again, let's look at an example.
With the following property (background-position 20px 30px) the top of the image is positioned 20px from the top of the element for which it is a background, while the left of the image is placed 30px from the left of the element for which it is a background.
If you are wondering quite how this differs from percentage values, see the emphasized text in this part, and compare it with the emphasized text in the part above which describes how percentage values work.
In our section on values we cover exactly what lengths are in detail.
Pairs of Keywords and Individual Keywords
Rather than relying on length values, or percentage values, keyword values can be used. Keywords have a similar effect to percentages.
The keywords which can be used to specify position are
top
left
center
right
bottom
Rather than go into laborious detail, here is the explanation from the recommendation
top left' and 'left top' both mean the same as '0% 0%'.
top', 'top center' and 'center top' mean the same as '50% 0%'.
right top' and 'top right' mean the same as '100% 0%'.
left', 'left center' and 'center left' mean the same as '0% 50%'.
center' and 'center center' mean the same as '50% 50%'.
right', 'right center' and 'center right' mean the same as '100% 50%'.
bottom left' and 'left bottom' mean the same as '0% 100%'.
bottom', 'bottom center' and 'center bottom' mean the same as '50% 100%'
bottom right' and 'right bottom' mean the same as '100% 100%'.
If no background-position is specified, this is the equivalent of a background-position of 0% 0%, that is, the top left of the background image is placed in the top left of the element.
An element does not inherit the background-position of its parent.
The background-position property lets you create watermark effects by placing a single image in the center of an element, for example in the center of a page. It is a tricky, but powerful property.
Not every type of element can have a background-position, even though any type of element can have a background image. Only block elements and replaced elements can have this property.
| Internet Explorer | Netscape Navigator | Opera | WebTV | ||||||||
| Windows | Macintosh | (All Platforms) | (All Platforms) | ||||||||
| 4.0 | 5.0 | 5.5 | 6.0 | 4.0 | 4.5 | 5.0 | 4.x | 6.0 | 3.5 | 5.0 | 1.0 |
| Y | Y | Y | Y | Y | Y | Y | N | Y | Y | Y | N |
The position property only specifies how an element will be placed on the page by a browser. The actual position is specified using the top and left properties which we cover below.
Elements can be positioned in one of four ways: statically, relatively absolutely or fixed. The value is specified by one of four keywords: static, relative, absolute and fixed.
Note that with Layout Master you can only set the position property to absolute or fixed.
When the position of an element is static, the browser will draw the element in the usual place. Essentially, this is the traditional positioning used with straight HTML.
When the position is specified as relative, an element is placed with respect to its natural position, that is, with respect to where it would be if statically positioned.
For example, with a relative position, a top of 20px and a left of 20px (we'll look at the top and left properties very shortly), an element is placed 20px to the right and 20px down from where it would naturally, or statically be located.
With absolute positioning, an element is placed in a specified location with respect to either the top left of the page, or with respect to its parent element. fixed positioning as we have seen is related. Instead of the element being positioned with respect to the top left of the page, it's positioned with respect to the top left of the window. This means if the page is scrolled, the element remains fixed with respect to the top and left of the window.
When no position property is specified, an element has a static position.
An element does not inherit the position property of its parent.
Take some time to consider the differences between the different types of positioning possible.
| Internet Explorer | Netscape Navigator | Opera | WebTV | ||||||||
| Windows | Macintosh | (All Platforms) | (All Platforms) | ||||||||
| 4.0 | 5.0 | 5.5 | 6.0 | 4.0 | 4.5 | 5.0 | 4.x | 6.0 | 3.5 | 5.0 | 1.0 |
| P | P | P | P | P | P | B | P | P | N | Y | N |
Internet Explorer 4.0 and 4.5 Macintosh and 4.0 Windows only supports position: absolute on div and span elements. To position an element absolutely you must put it inside one of these. The value fixed is not supported by these browsers.later versions of all browsers, insofar as they support values for position, support them just as well on any element, not just div and span elements.Internet Explorer 5.0 Macintosh supports all the position values on any type of element. It has one irritating bug, however. If you create a fixed element, and place links in this element, the position of the "linked area" can become detached from the linked text when the page is scrolled. This is particularly irritating because using a fixed element would be a good way of creating a navigation bar that is always on screen, as we used to do with frames. Internet Explorer 5.0, 5.5 and 6.0 Windows does not support the value fixed either.Netscape Navigator 6 does not support the value fixed, treating it in the same way as static. |
|||||||||||
The top property specifies where the top of an element will be placed. Remember that the actual position on the page is affected by the value of the position property we looked at just above.
top is an offset from either the natural location of the element (for relative positioning), from the top of the page or the top of the parent element, for absolute position, or from the top of the window for fixed positioning. See position above for more on when each is the case.
Negative top values move an element up the page, positive top values move the element down the page.
For elements with a static position, top has no effect.
The top of an element can be specified using length values, percentage values, or using the auto keyword.
Length Values
When the top is specified using a length value, the element is offset up or down the page from a location determined by the position value of the element.
We cover length values in detail in our section on values.
Percentage Values
When top is specified as a percentage value, the element is offset up or down the page by this percentage of the height of its parent element.
We cover percentage values in detail in our section on values.
Auto
A top of auto places the element with no offset up or down the page.
If no top is specified, the top of the element is auto.
An element does not inherit the top of its parent, however, an element may be affected by the positioning of its parent element.
top specifies where an element appears in conjunction with the position property, which specifies how the element will be positioned with respect to its parent or the page. You will need to have a fair understanding of how positioning works to ensure that you achieve your desired outcomes. We cover positioning in detail above.
| Internet Explorer | Netscape Navigator | Opera | WebTV | ||||||||
| Windows | Macintosh | (All Platforms) | (All Platforms) | ||||||||
| 4.0 | 5.0 | 5.5 | 6.0 | 4.0 | 4.5 | 5.0 | 4.x | 6.0 | 3.5 | 5.0 | 1.0 |
| P | P | Y | Y | P | P | Y | B | Y | N | Y | N |
| The older browsers in which this was partially supported only allowed positioning on a limited range of elements. Only div elements are guaranteed to take positioning in these browsers. Netscape 4.x: positioned elements which are the children of other positioned elements cause the entire layout to be ignored. Additionally when pages are resized all layout is subsequently ignored. |
|||||||||||
The left property specifies where the left of an element will be placed. Remember that the actual position on the page is affected by the value of the position property we looked at above.
left is an offset from either the natural location of the element (for relative position), from the left of the page or the left of the parent element, for absolute position, or from the left of the window, for fixed position. See position above for more on when each is the case.
Negative left values move an element leftwards along the page, positive left values move the element rightwards.
For elements with a static position, left has no effect.
The left of an element can be specified using length values, percentage values, or using the auto keyword.
Length Values
When left is specified using a length value, the element is offset to the left or to the right along the page from a location determined by the position value of the element.
We cover length values in detail in our section on values.
Percentage Values
When left is specified as a percentage value, the element is offset to the left or to the right along the page by this percentage of the width of its parent element.
We cover percentage values in detail in our section on values.
Auto
A left of auto places the element with no offset leftwards or rightwards on the page.
If no left is specified, the left of the element is auto.
An element does not inherit the left of its parent. However, the left of an element can be affected by the position of its parent.
left specifies where an element appears in conjunction with the position property, which specifies how the element will be positioned with respect to its parent on the page. You will need to have a fair understanding of how positioning works to ensure that you achieve your desired outcomes. We cover positioning in detail above.
| Internet Explorer | Netscape Navigator | Opera | WebTV | ||||||||
| Windows | Macintosh | (All Platforms) | (All Platforms) | ||||||||
| 4.0 | 5.0 | 5.5 | 6.0 | 4.0 | 4.5 | 5.0 | 4.x | 6.0 | 3.5 | 5.0 | 1.0 |
| P | P | Y | Y | P | P | Y | B | Y | N | Y | N |
| The older browsers in which this was partially supported only allowed positioning on a limited range of elements. Only div elements are guaranteed to take positioning in these browsers. Netscape 4.x: positioned elements which are the children of other positioned elements cause the entire layout to be ignored. Additionally when pages are resized all layout is subsequently ignored. |
|||||||||||
Not surprisingly, this property specifies how wide an element would appear on a page.
width can be specified as a percentage, as a length value, or as auto.
Percentage Values
When a width is specified as a percentage, its width is this percentage of the width of its parent. We cover percentage values in detail in our section on values.
Length Values
A width can be specified as a length. Lengths are covered in detail in our section on values.
Auto
A width of auto is the default width of an item.
If no value is set for the width of an element, its width is set to auto.
An element does not inherit the width of its parent.
width was specified as part of the original CSS1 recommendation. It is modified in part by the CSS2 recommendation.
| Internet Explorer | Netscape Navigator | Opera | WebTV | ||||||||
| Windows | Macintosh | (All Platforms) | (All Platforms) | ||||||||
| 4.0 | 5.0 | 5.5 | 6.0 | 4.0 | 4.5 | 5.0 | 4.x | 6.0 | 3.5 | 5.0 | 1.0 |
| P | Y | Y | Y | P | Y | Y | B | Y | Y | Y | N |
| Netscape Navigator 4.x: width is not supported on images at all. On block elements width is supported if length units are given, but it renders inaccurately if % units are given. Internet Explorer 4.0x for Windows and Mac: width is correctly supported on images, but not supported at all on block elements (either % or length values), e.g. paragraphs. |
|||||||||||
The height property enables you to specify the height of an element in a number of ways.
height can be specified as a percentage, as a length value, or as auto.
Percentage Values
When a height is specified as a percentage, its height is this percentage of the height of its parent. We cover percentage values in detail in our section on values.
Length Values
A height can be specified as a length. Lengths are covered in detail in our section on values.
Auto
A height of auto is the default height of an item.
If no value is set for the height of an element, it's height is set to auto.
An element does not inherit the height of its parent.
height was specified as part of the original CSS1 recommendation. It is modified in part by the CSS2 recommendation.
| Internet Explorer | Netscape Navigator | Opera | WebTV | ||||||||
| Windows | Macintosh | (All Platforms) | (All Platforms) | ||||||||
| 4.0 | 5.0 | 5.5 | 6.0 | 4.0 | 4.5 | 5.0 | 4.x | 6.0 | 3.5 | 5.0 | 1.0 |
| Y | Y | Y | Y | Y | Y | Y | P | Y | Y | Y | N |
height was not supported on images in Netscape Navigator 4.x. |
|||||||||||
Because CSS allows the absolute positioning of elements on a page, we need to take care of the situation where elements overlap. The "stacking order" is specified using the z-index property. It determines which elements are in front of others when they overlap.
z-index is specified either by an integer, or by the keyword auto.
Integer Values
Where z-index is specified using an integer, given two elements with a common parent, the element with the higher z-index is in front of the one with the lower z-index.
There are however some complicating factors. z-indexes are not applicable to the whole page, but only within a particular containment hierarchy. This means that the z-index of parent elements is important in determining which element obscures another. Let's try an example.
Suppose you have an absolutely positioned image with a z-index of 10 in a paragraph of z-index 1, and an image of z-index 2 in another paragraph of z-index 5. If the two images overlap, which obscures the other? In this case it is the image with the lower z-index, because its parent paragraph has the higher z-index. So the paragraph with the higher z-index obscures the one with the lower z-index, and as a consequence the contents of the paragraph with the higher z-index obscure the contents of the paragraph with the lower z-index, regardless of the z-indexes of the contents.
Its logical, if a little convoluted.
Another subtle aspect is the question of how to make the contents of an element be closer to the front of the page, or further from the front of the page than the element itself. When the z-index of an element is less than zero, then the parent element is closer to the front of the page, when the z-index of an element is more than zero, the element is closer to the front of the page.
Auto
When the z-index is specified as auto, the browser determines the place of an element in the stacking order according to a relatively complicated set of rules, but in a nutshell, in the order in which the elements appear in the HTML code of the page.
Where no z-index is specified, the z-index of an element is auto.
An element does not inherit the z-index of its parent element. However, the stacking of elements is relative to parent elements. That is, where we have two elements, both with child elements, then all of the child elements of the parent with the higher z-index are in front of all of the child elements of the other parent element.
Although the rules associated with stacking seem complicated, they are in fact the intuitive way for stacking to work. If there are two elements, each with child elements, then it makes sense that all of the children of the front-most element would be in front of all of the children of the element behind.
This same rule can be applied recursively, so that within an element, if more than one child itself has child elements, then the children of the front-most child are all in front of the children of the other child. And so on ad infinitum.
| Internet Explorer | Netscape Navigator | Opera | WebTV | ||||||||
| Windows | Macintosh | (All Platforms) | (All Platforms) | ||||||||
| 4.0 | 5.0 | 5.5 | 6.0 | 4.0 | 4.5 | 5.0 | 4.x | 6.0 | 3.5 | 5.0 | 1.0 |
| Y | Y | Y | Y | Y | Y | Y | Y | Y | Y | Y | N |
While it might not seem to make much sense to make an element of a page invisible, in conjunction with scripting (for example with Javascript), showing and hiding elements when a user clicks, or moves a mouse over an element, or even based on time can be a powerful tool. The visibility property lets you make an element either visible or invisible.
visibility can be specified as one of three keywords, visible, hidden and inherit.
A visibility of visible and hidden are straightforward.
A visibility of inherit specifies that an element should have the same visibility as its parent.
If no visibility is specified, an element has a visibility of inherit.
An element only inherits its parent's visibility if the element's visibility is set to inherit.
An element with a visibility of hidden still affects the drawing and layout of a page. The page is still laid out as if the element were visible. If you would like page to be laid out as if the element were not there at all (and for the element to also be invisible) then the display property which we discuss in our Complete CSS Guide has a possible value of none, which has the described effect.
| Internet Explorer | Netscape Navigator | Opera | WebTV | ||||||||
| Windows | Macintosh | (All Platforms) | (All Platforms) | ||||||||
| 4.0 | 5.0 | 5.5 | 6.0 | 4.0 | 4.5 | 5.0 | 4.x | 6.0 | 3.5 | 5.0 | 1.0 |
| Y | Y | Y | Y | Y | Y | Y | Y | Y | Y | Y | N |
Because the width and height of elements can be set by an author, we may have the situation where an element is not big enough to fit its contents. What do we do when this occurs? For images, traditionally the image is scaled to fit the size of the element. CSS introduces the overflow property to let you specify how a browser should display elements where the contents of the element do not all fit into the width and height of the element.
overflow can take the keyword values visible, hidden, scroll, and auto.
An overflow of visible means that the browser should increase the width and/or the height of the element to display all of its contents.
An overflow of hidden means that the browser should 'clip' the contents, displaying only the contents which are visible within the specified width and height.
An overflow of scroll means that the browser should place scrollbars on the element whether or not the contents of the element have overflowed.
An overflow of auto means that the browser should add scrollbars as needed to enable users to scroll horizontally and/or vertically to show hidden contents of the element.
The last two values should be familiar to those who have worked with frames in HTML. Frames can have a scroll specified never, always and auto. These correspond to hidden, scroll and auto.
If no overflow is specified, the overflow of an element is visible.
An element does not inherit the overflow of its parent.
Theoretically, with the overflow property, the need for frames is greatly reduced. Unfortunately, as of the time of writing, most browsers, particularly older ones, do not support the overflow property.
| Internet Explorer | Netscape Navigator | Opera | WebTV | ||||||||
| Windows | Macintosh | (All Platforms) | (All Platforms) | ||||||||
| 4.0 | 5.0 | 5.5 | 6.0 | 4.0 | 4.5 | 5.0 | 4.x | 6.0 | 3.5 | 5.0 | 1.0 |
| N | Y | N | N | B | N | Y | N | P | N | ||
Internet Explorer 5.0 Macintosh does not support overflow very well at all. Inconsistently, it will draw a scroll bar for scroll. If you use visible, it extends the background as well as the content, which is incorrect. If you use auto, instead of scrolling the overflow as it should, it shows it as visible. Worst, if you use hidden, when this field is clicked into, the browsers crashes - not good.Internet Explorer 6.0 Windows supports overflow well. The only minor problem it has is in extending the background as well as the content when the value of visible is given.Opera 5.0 does not support scroll - the content will appear the same as if it was hidden.A word about autoThe behavior of the browser when the value is set to auto is, according to the specification, "user agent specific", although a scrolling mechanism should be provided. The obvious scrolling mechanism is a scroll bar, but it is also acceptable to simply allow the content to scroll when dragged down with the cursor. Both Opera and Internet Explorer 5 Macintosh don't correctly support auto - they treat it the same as they do visible. Internet Explorer 6 Windows and Netscape Navigator 6 both correctly support auto by giving a scroll bar. |
|||||||||||
Unlike border widths which we have just seen, border-color is set using a single property. However, that doesn't mean you can't set each edge to a different color. As with the border-width shorthand property we just looked at, border-color enabled different edge colors by using more than one value.
border-color is specified by between one and four color values. We discuss color values in detail in our values section.
You can use border-color to give different colors to each edge of an element.
If no color is specified for the border, the border has the same value as the element itself, that is the value specified by the color property.
The border-color of an element is not inherited from its parent element.
As with border widths (and all border properties) support for different edges is far from perfect in Netscape prior to version 6.
| Internet Explorer | Netscape Navigator | Opera | WebTV | ||||||||
| Windows | Macintosh | (All Platforms) | (All Platforms) | ||||||||
| 4.0 | 5.0 | 5.5 | 6.0 | 4.0 | 4.5 | 5.0 | 4.x | 6.0 | 3.5 | 5.0 | 1.0 |
| Y | Y | Y | Y | Y | Y | Y | P | Y | Y | Y | N |
Netscape Navigator 4.x does not support using border-color to give different edges of the border different colors. It reads the border color completely incorrectly and gives one color to all sides. Remember too, you have to set a border-width as well as a color, or Netscape Navigator will not draw a border at all. |
|||||||||||
In addition to width and color, the border of an element, or its individual edges can have a style. There are several possible styles, though not all are currently supported by major browsers.
As with border-color, different border-styles can be assigned to different edges of a border using the same syntax we saw for colors.
You can use border-style to give different styles to each edge of an element.
The border-style keywords are
none
dotted
dashed
solid
double
groove
ridge
inset
outset
Rather than describe them, investigate each by way of example. You'll find that many appear the same in most browsers, because support for this property is not yet 100%.
If no border-style property is specified, the style of a border is none.
Elements do not inherit the border-style of their parent elements.
As with other border properties, support for specifying different edges of a border is far from perfect in major browsers.
You should also keep in mind that some browsers do not support every kind of style. Usually, where a style keyword is not supported, the browser draws the border as solid.
| Internet Explorer | Netscape Navigator | Opera | WebTV | ||||||||
| Windows | Macintosh | (All Platforms) | (All Platforms) | ||||||||
| 4.0 | 5.0 | 5.5 | 6.0 | 4.0 | 4.5 | 5.0 | 4.x | 6.0 | 3.5 | 5.0 | 1.0 |
| P | P | Y | Y | P | P | Y | P | Y | Y | Y | N |
Netscape Navigator 4.x does not support dotted and dashed styles, drawing them as solid.It does not give a different border style to the different edges if you attempt to apply different styles to different edges. It just uses the first value for every edge. More importantly, Netscape Navigator 4.x needs a border-width value as well as a border-style value in order for it to draw a border. Likewise if you only define a border-width value and no border-style value, it wrongly draws a border.Netscape Navigator 4.x does not support border-style when applied to td elements.Internet Explorer 4.0x Macintosh and Windows, 4.5 Macintosh and 5 Windows does not draw a border-style of double correctly if the border-width is thin. The border will be displayed as a single thin border.Internet Explorer 4.0x and for Windows does not support dotted and dashed styles, drawing them as solid. |
|||||||||||
These properties let you set the width of the respective edges individually or all at once.
Border widths can take either keyword values, or length values.
The keyword values that can be used are
thin
medium
thick
There is no precise specification for these keywords, so different browsers will probably (and as of writing indeed do) draw them as different thicknesses. The only guarantee is that thin is not thicker than medium which is no thicker than thick.
Length values are discussed in detail in our section on values. Using relative length values you can create borders that are in proportion with the size of an element, or its contents.
If no width is set, the thickness of a border is medium. Note that this does not mean that all elements have medium borders unless otherwise defined, In order for an element to have a border, it must be given a border style.
An element does not inherit the thickness of its parent element's border.
Until Netscape 6, separate border values have been poorly supported by Netscape.
The border-width property can be used to set the value of each edge separately. To do this, use more than one value for the property. You can use between one value and four values for the border-width property.
| Internet Explorer | Netscape Navigator | Opera | WebTV | ||||||||
| Windows | Macintosh | (All Platforms) | (All Platforms) | ||||||||
| 4.0 | 5.0 | 5.5 | 6.0 | 4.0 | 4.5 | 5.0 | 4.x | 6.0 | 3.5 | 5.0 | 1.0 |
| Y | Y | Y | Y | Y | Y | Y | B | Y | Y | Y | N |
Netscape Navigator 4.x: when a border-width is set on only one side, only this side will be drawn. The other sides should all be drawn with the default (medium) width.Workaround: Explicitly set a width on all sides using border-width. |
|||||||||||